<template>
  <div class="cj" v-if="CropperShow">
    <!-- 头像裁剪组件 -->
    <div class="image-container">
      <!-- 拖拽框 -->
      <div ref="cropBox" class="crop-box" @touchstart="handelDown($event)"></div>
      <!-- 要截取的图片 -->
      <img ref="image" :src="props.ImgData" alt="图片">
      <div class="btns">
        <button id="crop-button" @click="cropButton">确定</button>
        <button @click="handleClose">取消</button>
      </div>
    </div>
    <!-- 预览图片 -->
    <canvas id="result-canvas" style="margin-left: 20px;"></canvas>
  </div>
</template>

<script setup>
import { reactive, ref } from "vue";

let props = defineProps(['CropperShow', 'ImgData'])

let cropBox = ref(null)  // 拖拽框
let isDragging = ref(false) //  是否可拖拽
let image = ref(null) //  要裁剪的图片
// 手指点击在拖拽框的位置
let dragObj = reactive({
  startX: '',
  startY: ''
})

const emit = defineEmits(['handleResult', 'handleClose'])

// 点击取消时传递给父组件，通知父组件关闭裁剪组件
function handleClose() {
  emit('handleClose', false)

}

// 确定裁剪
function cropButton() {
  const resultCanvas = document.getElementById('result-canvas');
  const resultCtx = resultCanvas.getContext('2d');

  // const left = parseInt(cropBox.value.style.left);
  // const top = parseInt(cropBox.value.style.top);
  const width = cropBox.value.offsetWidth;
  const height = cropBox.value.offsetHeight;
  console.log(width, height);

  // 清空画布
  resultCtx.clearRect(0, 0, resultCanvas.width, resultCanvas.height);

  // 将裁剪的部分绘制到结果画布中
  resultCanvas.width = width;
  resultCanvas.height = height;
  resultCtx.drawImage(image.value, 0, 0, width, height);

  console.log(resultCanvas.toDataURL('image/jpeg'));
  // 保存裁剪后的图片路径
  const croppedDataURL = resultCanvas.toDataURL('image/jpeg');

  console.log(croppedDataURL)

  // 裁剪完成后通知父组件关闭裁剪组件,并传递裁剪过后的图片
  emit('handleResult', false, croppedDataURL)
}

function handelDown(event) {
  console.log(event);
  isDragging.value = true
  dragObj.startX = event.touches[0].clientX - cropBox.value.getBoundingClientRect().left;
  dragObj.startY = event.touches[0].clientY - cropBox.value.getBoundingClientRect().top;
  event.preventDefault();
}

document.addEventListener('touchmove', (event) => {
  // 如果触摸了拖拽框就让拖拽框可移动
  if (isDragging.value) {
    // 改变拖拽框在页面上的位置
    const left = event.changedTouches[0].clientX - dragObj.startX - image.value.getBoundingClientRect().left;
    const top = event.changedTouches[0].clientY - dragObj.startY - image.value.getBoundingClientRect().top;
    // console.log(left, top)
    // 确保裁剪框在不超出图片边界后再进行拖拽框的拖动
    if (left >= 0 && top >= 0 && (left + cropBox.value.offsetWidth) <= image.value.width && (top + cropBox.value.offsetHeight) <= image.value.height) {
      // 边界判断通过后才让拖拽框移动
      cropBox.value.style.left = left + 'px';
      cropBox.value.style.top = top + 'px';
    }
  }
})
</script>

<style lang="scss" scoped>
@function r($v) {
  @return $v / (390 / 10rem)
}

* {
  padding: 0;
  margin: 0;
}

.cj {
  position: fixed;
  top: 0;
  z-index: 3;
  width: 10rem;
  height: 100vh;
  background: #161622;
  z-index: 9999999999;
  overflow: visible;
}

.image-container {
  position: relative;
  top: 0;
  display: inline-block;
  overflow: hidden;
  width: 100%;
  height: r(390);
}

// 要截取的图片
img {
  display: block;
  width: 100%;
  height: 100%;
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
  filter: brightness(0.7);
  /* 0.5 表示亮度降低为原来的一半，可以根据需要调整 */
}

.crop-box {
  position: absolute;
  z-index: 2;
  border: r(1) dashed #fff;
  background-color: rgba(255, 255, 255, 0.6);
  /* 半透明白色背景 */
  pointer-events: auto;
  cursor: move;
  width: r(300);
  height: r(300);
  opacity: 0.7;
  overflow: visible;
}

.btns {
  position: absolute;
  z-index: 9;
  top: r(15);
  right: r(15);
  font-size: r(18);
  width: r(50);
  height: r(60);
  //  background-color: red;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  align-items: center;

  button {
    font-size: r(12);
    width: r(40);
    height: r(20);
    color: #000;
  }
}
</style>
